<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            // 代码能够执行这个函数，说面页面的标签加载完成
            // 向web服务器发送给ajax请求，本之上是发送一个http请求
            // $.ajax({
            //     // 下面的写法，发送ajax请求的时候，这个url会自动拼接成类似这样的网址
            //     // url:"http://localhost:8000/data/data.json",
            //     // url:"/data/data.json" 前面有没有/都没关系
            //     // 如果请求地址有'/'，那么在进行url地址拼接的时候就不需要加上'/'
            //     // 如果地址前面没有'/'，那么在进行url地址拼接的时候会自动加上'/'
            //     url:"data/data.json",
            //     method:"GET",
            //     data:{"name":"hello"},
            //     dataType:"json",
            //     success:function(data) {
            //         // alert(data.name);
            //         // 把ajax请求的后台数据绑定给指定标签
            //         $("div").html(data.name);
            //     },
            //     error:function() {
            //         alert("网络异常");
            //     },
            //     // true标识发送异步的ajax请求
            //     async:true
            // });

            // python自带的服务器不支持post请求，如果想测试post请求，得用我们自己的服务器
            // $.ajax({
            //     // 下面的写法，发送ajax请求的时候，这个url会自动拼接成类似这样的网址
            //     // url:"http://localhost:8000/data/data.json",
            //     // url:"/data/data.json" 前面有没有/都没关系
            //     // 如果请求地址有'/'，那么在进行url地址拼接的时候就不需要加上'/'
            //     // 如果地址前面没有'/'，那么在进行url地址拼接的时候会自动加上'/'
            //     url:"data/data.json",
            //     method:"POST",
            //     data:{"name":"hello"},
            //     dataType:"json",
            //     success:function(data) {
            //         // alert(data.name);
            //         // 把ajax请求的后台数据绑定给指定标签
            //         $("div").html(data.name);
            //     },
            //     error:function() {
            //         alert("网络异常");
            //     },
            //     // true标识发送异步的ajax请求
            //     async:true
            // });

            // 1. url
            // 2. 请求参数
            // 3. 成功回调函数
            // 4. 数据类型 
            $.get("data/data.json", {"name":"李四"}, function(data) {
                $("div").html(data.name);
            }, "JSON").error(function() {
                alert("网络异常");
            });

            // $.post("data.json", {"name":"李四"}, function(data) {
            //     $("div").html(data.name);
            // }, "JSON").error(function() {
            //     alert("网络异常");
            // });
        });
    </script>
</head>
<body>
    <div></div>
</body>
</html>